<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11过滤器</title>
</head>
<body>
<!--
1. 理解过滤器
    功能：对要显示的数据进行特定格式化再显示
    注意：并没有改变原来的数据，可是产生了新的对应数据
2. 编码
    1). 定义过滤器
        Vue.filter(filterName, function(value[,arg1,arg2,...])){
            //进行一定的数据处理
            return newValue
        }
    2). 使用过滤器
        <div>{{myData | filterName}}</div>
        <div>{{myData | filterName(arg)}}</div>
-->

<!--需求：对当前时间进行格式化显示-->
<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{date}}</p>
  <p>完整版：{{date | dateString}}</p>
  <p>年月日：{{date | dateString('YYYY-MM-DD')}}</p>
  <p>时分秒：{{date | dateString('HH:mm:ss')}}</p>

</div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
    <script type="text/javascript">
      //自定义过滤器
      //函数对象
      Vue.filter('dateString',function (value,format) {
      //moment.js 时间类的一个库，百度
        return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');
      });

      new Vue({
        'el':'#test',
        data:{
          date: new Date(),
        }
      });
    </script>
</body>
</html>
